<template>
  <div class="asideWrap">
    <div class="cities" @mouseleave="handleMouseleave">
      <div
        class="title"
        v-for="(item, index) in cities"
        :key="index"
        @mouseenter="handleMouseenter(index)"
        :class="{ active: currentIndex == index }"
      >
        {{ item.type }}
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="children" v-if="currentIndex != -1">
        <div
          class="children-item"
          v-for="(childe, index) in cityData"
          :key="index"
        >
          <span class="num">{{ index + 1 }}</span>
          <span class="city" @click="searchCity(childe.city)">{{
            childe.city
          }}</span>
          <span class="desc" @click="searchCity(childe.city)">
            {{ childe.desc }}</span
          >
        </div>
      </div>
    </div>

    <el-row class="tuijian">
      <div class="recommendCity">推荐城市</div>
      <div>
        <img src="@/assets/pic_sea.jpeg" />
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      tabPosition: "left",
      cities: [],
      currentIndex: -1,
      cityData: [],
    };
  },
  created() {
    this.$axios({
      url: "/posts/cities",
    }).then((res) => {
      // console.log(res.data.data);
      this.cities = res.data.data;
    });
  },
  methods: {
    handleMouseenter(index) {
      this.currentIndex = index;
      this.cityData = this.cities[index].children;
    },
    handleMouseleave() {
      this.currentIndex = -1;
    },
    searchCity(city) {
      this.$router.push(`/post?city=${city}`);
    },
  },
};
</script>

<style lang="less" scoped>
.asideWrap {
  width: 260px;

  .cities {
    position: relative;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;

    .title {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      height: 40px;
      padding: 0 20px;
      &.active {
        border-right: 0;
        color: #ffa500;
      }
    }
    .children {
      position: absolute;
      top: -1px;
      right: -351px;
      width: 350px;
      height: 200px;
      border: 1px solid #ddd;
      border-left: 0;
      z-index: 2;
      background-color: #fff;
      .children-item {
        display: flex;
        height: 40px;
        align-items: center;
        &:last-child {
          border-left: 1px solid #ddd;
        }
        span {
          margin-right: 10px;
          font-size: 14px;
        }
        .num {
          margin-left: 20px;
          font-size: 25px;
          color: #ffa500;
          font-family: Georgia, "Times New Roman", Times, serif;
        }
        .city {
          font-size: 14px;
          color: #ffa500;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
        .desc {
          color: #aaa;
          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  }
  img {
    width: 100%;
    object-fit: cover;
  }
  .tuijian {
    .recommendCity {
      margin-top: 20px;
      padding: 10px;
    }
    /deep/.el-carousel__button {
      width: 20px;
      height: 2px;
    }
    el-carousel-item {
      position: relative;
    }
    .name {
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      color: orange;
    }
  }
}
</style>